<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            min-height: 100vh;
        }

        html,
        body {
            padding: 0;
            margin: 0;
        }

        .page1 {
            /* --url: url('./1.jpg'); */
            /* background: var(--url) top left / cover no-repeat; */
            background-image: url(1.jpg);
            background-size: cover;
            background-position: top left;
            background-repeat: no-repeat;
            height: 100vh;
            position: sticky;
            top: 0;
        }

        .page2 {
            height: 14040px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="page1"></div>
    <div class="page2"></div>
    <script>
        let start = 0;
        const css = [];
        const cache = []
        const urls = Array.from({ length: 14 }).forEach((item, index) => {
            css.unshift(`url(${index + 1}.jpg)`)
            cache.push(css.join(','))
        })
        let lastScrollTop = 0;
        function clamp(number, min, max) {
            return Math.max(min, Math.min(number, max));
        }
        const setbg = (direction = 'up') => {
            direction === 'down' ? start++ : start--
            start = clamp(start, 0, 14)
            document.querySelector('.page1').style.setProperty('background-image', cache[start])
        }
        function debounce(func, wait) {
            let timeout;
            return function (...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), wait);
            };
        }
        let ticking = false;
        window.onscroll = function () {
            if (!ticking) {
                requestAnimationFrame(() => {
                    window.scrollY > lastScrollTop ? setbg('down') : setbg('up')
                    lastScrollTop = window.scrollY
                    ticking = false;
                })
                ticking = true;
            }
        }
    </script>
</body>

</html>